<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 上部分 -->
        <el-form :model="ruleForm">
      <el-row>
        <el-col :span="5">标签名称：
          <el-input  placeholder="请输入内容" v-model="data.tags" class="addbtn" clearable></el-input>
        </el-col>
        <el-col :span="3">省：
          <el-select  placeholder="请选择" v-model="ruleForm.provinces" @change="citysitem">
      <el-option :label="item.citys" v-for="(item , i) in provinces" :key="i" :value="item" ></el-option>
    </el-select>
         </el-col>
        <el-col :span="3">市：
           <el-select  placeholder="请选择" v-model="ruleForm.citys" >
      <el-option :label="item.area" v-for="(item , i) in citysLst" :key="i" :value="item" ></el-option>
    </el-select>
        </el-col>
        <el-col :span="5">企业简介：
          <el-input v-model="data.shortName" class="addbtn" clearable></el-input>
        </el-col>
        <el-col :span="3">状态：
          <el-select  placeholder="请选择" v-model="ruleForm.status">
      <el-option :label="item.label"  v-for="(item , i) in status" :key="i" :value="item" ></el-option>
    </el-select>
        </el-col>
        <el-col :span="3">操作：
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getCompanys">搜索</el-button>
        </el-col>
        <el-col :span="2"><div></div></el-col>
      </el-row>
</el-form>
      <!-- 新增用户 -->
      <el-button type="primary" icon="el-icon-edit" size="mini" class="adduser" @click="centerDialogVisible = true">新增用户</el-button>
      <!-- 消息提示的文案 -->
       <el-alert
    :title="`共${total}条数据`"
    type="info"
    show-icon>
  </el-alert>
  <!-- 用户列表展示 -->
      <el-table :data="items" border stripe>
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column label="企业编号" prop="number"></el-table-column>
        <el-table-column label="企业简称" prop="shortName"></el-table-column>
        <el-table-column label="标签" prop="tags"></el-table-column>
        <el-table-column label="创建者" prop="creatorID"></el-table-column>
        <el-table-column label="创建日期" >
          <template slot-scope="scope">{{scope.row.addDate | parseTime}}</template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.state === 1">启用</span>
            <span v-else>禁用</span> -->
          <span >{{scope.row.state=== 0?'启用':'禁用'}}</span>

          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px" >
           <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-button type="primary" size="mini" @click="editFrombay(scope.row.id)" >编辑</el-button>
             <!-- 禁用 -->
              <el-button type="primary" size="mini"  @click="forbidden(scope.row)">{{scope.row.state=== 1?'启用':'禁用'}}</el-button>
             <!-- 删除按钮 -->
             <el-button type="danger" size="mini" @click="removeClicke(scope.row.id)" >删除</el-button>
            </template>
        </el-table-column>
      </el-table>
            <!-- 分页区域 -->
    <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="data.page" :page-sizes="[1,2,5,10]"
      :page-size="data.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
    </el-pagination>
    <!-- 新增用户 -->
    <el-dialog
  title="创建用户"
  :visible.sync="centerDialogVisible"
  width="50%" center class="addNew" @close="addDialog">
<el-form :model="ruleFormAdd" :rules="ruleFormAddRules" ref="ruleFormAddruleForm" label-width="80px" class="demo-ruleForm" >
  <el-form-item label="企业名称" prop="shortName">
    <el-input v-model="ruleFormAdd.shortName"></el-input>
    <div>
      <el-checkbox v-model="ruleFormAdd.isFamous">是否为名企</el-checkbox>
    </div>
  </el-form-item>
  <el-form-item label="所属公司" prop="company">
    <el-input v-model="ruleFormAdd.company"></el-input>
    <div>
      https://www.tianyancha.com （在此可查询所属公司全称及简称）
    </div>
  </el-form-item>
  <el-form-item label="城市">
  <el-select v-model="ruleFormAdd.provinces" placeholder="请选择">
    <el-option
      v-for="item in provinces"
      :key="item.id"
      :label="item.citys"
      :value="item">
    </el-option>
  </el-select>
    <el-select v-model="ruleFormAdd.citys" placeholder="请选择">
    <el-option
      v-for="item in citysLst"
      :key="item.id"
      :label="item.area"
      :value="item">
    </el-option>
  </el-select>
  </el-form-item>
   <el-form-item label="方向(企业标签)" prop="tags">
    <el-input v-model="ruleFormAdd.tags"></el-input>
  </el-form-item>
  <el-form-item label="备注"  style="width: 650px;" >
    <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入"
  v-model="ruleFormAdd.remarks"
 >
</el-input>
  </el-form-item>
</el-form>
 <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Adduserlist">确 定</el-button>
  </span>
</el-dialog>
<!-- 编辑用户 -->
    <el-dialog
  title="创建用户"
  :visible.sync="editDialogVisible"
  width="50%" center class="addNew" @close="editDilog" >
<el-form :model="ruleFormedit" ref="ruleFormeditRef" label-width="80px" class="demo-ruleForm" >
  <el-form-item label="企业名称" prop="shortName">
    <el-input v-model="ruleFormedit.shortName"></el-input>
    <div>
      <el-checkbox v-model="ruleFormedit.isFamous">是否为名企</el-checkbox>
    </div>
  </el-form-item>
  <el-form-item label="所属公司" prop="company">
    <el-input v-model="ruleFormedit.company"></el-input>
    <div>
      https://www.tianyancha.com （在此可查询所属公司全称及简称）
    </div>
  </el-form-item>
  <el-form-item label="城市">
  <el-select v-model="ruleFormedit.provinces">
    <el-option
         v-for="item in provinces"
      :key="item.id"
      :label="item.citys"
      :value="item">
    </el-option>
  </el-select>
    <el-select v-model="ruleFormedit.citys">
    <el-option
      v-for="item in citysLst"
      :key="item.id"
      :label="item.area"
      :value="item">
    </el-option>
  </el-select>
  </el-form-item>
   <el-form-item label="方向(企业标签)" prop="tags">
    <el-input v-model="ruleFormedit.tags"></el-input>
  </el-form-item>
  <el-form-item label="备注"  style="width: 650px;" >
    <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入"
  v-model="ruleFormedit.remarks"
 >
</el-input>
  </el-form-item>
</el-form>
 <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="edituserlist">确 定</el-button>
  </span>
</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, update, detail, disabled, remove } from '@/api/hmmm/companys.js'
import { status } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'CompanysList',
  data () {
    return {
      data: {
        page: 1,
        pagesize: 10,
        tags: '',
        shortName: ''
      },
      items: [],
      total: 0,
      value: '',
      centerDialogVisible: false,
      editDialogVisible: false,
      id: '',
      state: 1,
      checked: true,
      textarea: '',
      status: status,
      provinces: provinces(),
      citysLst: [],
      parseTime: parseTime(),
      ruleForm: {
        tags: '',
        provinces: '',
        citys: '',
        shortName: '',
        state: 0
      },
      ruleFormAdd: {
        shortName: '',
        company: '',
        provinces: '',
        citys: '',
        tags: '',
        isFamous: true,
        remarks: ''
      },
      ruleFormedit: {
        shortName: '',
        company: '',
        provinces: '',
        citys: '',
        tags: '',
        isFamous: true,
        remarks: '',
        number: ''
      },
      ruleFormAddRules: {
        shortName: [
          { required: true, message: '请输入企业简称', trigger: 'blur' },
          { message: '企业简称不能为空', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请输入标签', trigger: 'blur' },
          { message: '请输入标签', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'blur' },
          { message: '请选择城市', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created () {
    this.getCompanys()
  },
  methods: {
    // 获取企业管理列表
    async getCompanys () {
      try {
        const { data } = await list(
          this.data
        )
        this.items = data.items
        this.total = data.counts
      } catch (err) {
        console.log('错误')
      }
    },
    // 监听pagesize改变的事件
    handleCurrentChange (newPage) {
      this.data.page = newPage
      // console.log(newPage)
      this.getCompanys()
    },
    // 监听页码值改变的事件
    handleSizeChange (newSize) {
      this.data.pagesize = newSize
      // console.log(newSize)
      this.getCompanys()
    },
    // 重置表单
    addDialog () {
      this.$refs.ruleFormAddruleForm.resetFields()
    },
    // 增加数据
    async Adduserlist () {
      try {
        await add({
          isFamous: this.ruleFormAdd.isFamous,
          // this.ruleFormAdd,
          city: this.ruleFormAdd.city.toString(),
          province: this.ruleFormAdd.province.toString(),
          shortName: this.ruleFormAdd.shortName,
          company: this.ruleFormAdd.company,
          tags: this.ruleFormAdd.tags,
          remarks: this.ruleFormAdd.remarks
        })
        // console.log(data)
        this.getCompanys()
        this.centerDialogVisible = false
        this.$message.success('新增用户成功！')
      } catch (err) {
        this.$message.error('新增用户失败,*号为必填项！')
      }
    },
    // 编辑用户
    async editFrombay (id) {
      this.editDialogVisible = true
      this.id = id
      try {
        const { data } = await detail({
          id: id
        })
        data.isFamous = Boolean(data.isFamous)
        this.ruleFormedit = data
        // console.log(data)
      } catch (err) {
        this.$message.error('编辑失败！')
      }
    },
    async  edituserlist () {
      try {
        await update({
          number: this.ruleFormedit.number,
          isFamous: this.ruleFormedit.isFamous,
          city: this.ruleFormedit.city.toString(),
          province: this.ruleFormedit.province.toString(),
          shortName: this.ruleFormedit.shortName,
          company: this.ruleFormedit.company,
          tags: this.ruleFormedit.tags,
          remarks: this.ruleFormedit.remarks,
          id: this.id
        })
        this.getCompanys()
        this.$message.success('编辑成功！')
      } catch (err) {
        this.$message.error('编辑失败！')
      }
      this.editDialogVisible = false
    },
    // 重置表单
    editDilog () {
      this.$refs.ruleFormeditRef.resetFields()
    },
    // 是否禁用
    async forbidden (info) {
      const confirmResult = await this.$confirm('已成功启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消！')
      }
      const { data } = await disabled({
        id: info.id,
        state: info.state === 0 ? 1 : 0
      })
      console.log(data)
      this.getCompanys()
      this.$message.success('成功！')
    },
    // 删除
    async removeClicke (id) {
      const confirmResult = await this.$confirm('已成功删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消！')
      }
      try {
        const { data } = await remove({
          id: id
        })
        console.log(data)
        this.$message.success('删除参数成功！')
        this.getCompanys()
      } catch (err) {
        this.$message.error('失败！')
      }
    },
    // 调用时间函数
    citysitem () {
      this.citysLst = citys(this.ruleForm.provinces)
    }
  }
}
</script>

<style lang="scss" scoped>
.addbtn {
  width: 170px;
}
.el-select {
  width: 130px;
}
.adduser {
  margin-top: 25px;
  display: flex;
 margin-left:auto;
}
.el-alert {
  margin: 15px 0;
}
.addNew .el-input {
  width: 580px;

}
.el-pagination {
  margin: 15px 0;
}
</style>
